<template>
    <header-comp @button-click="searchHandle"/>
    <div id="main-container">
        <div id="main-cookerShow">
            <cooker-item-comp @click="jumpCookerDetailPage($router, cooker.id)" id="cooker-item" v-for="cooker in cookerInfos.data"
                              :key="cooker.userName"
                              :userName="cooker.userName"
                              :headIcon="cooker.headIconUrl"
                              :location="cooker.locate"
                              :tagStr="cooker.tags"/>
        </div>
        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>
        <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="pageSize" @current-change="queryInfo"/>
    </div>

</template>

<script setup>
import CookerItemComp from "@/components/CookerItemComp.vue";
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import {StarFilled} from "@element-plus/icons-vue";
import HeaderComp from "@/components/HeaderComp.vue";
import {ElMessage} from "element-plus";
const { proxy } = getCurrentInstance()

let totalPage = ref(0);
let pageSize = ref(20);
let cookerInfos = reactive(
{
    "data":[],
    "itemKey": {
        "id": 1,
        "userName": "张三",
        "pwd": "123456",
        "sex": "男",
        "age": 15,
        "locate": "荆州市",
        "headIconUrl": "www.baidu.com",
        "idCard": "422856555566556665",
        "tel": "88888888",
        "tags": "1|2|3"
    }
},
);
const queryInfo = (pageNum) => {
    let path = `${proxy.serCtx}/userBase/allPageUser`
    let start = (pageNum - 1) * (pageSize.value)
    proxy.$axios.get(path, {
        params:{
            _start: start,
            _limit: pageSize.value
        }
    }).then((res) => {
        cookerInfos.data = res.data;
    })
    let path1 = `${proxy.serCtx}/userBase/allUserCount`
    proxy.$axios.get(path1).then((res)=> {
        totalPage = res.data;
    })
}

onMounted(()=>{
    queryInfo(1);
})

function searchHandle(searchText) {
    // 清空
    cookerInfos.data = []
    if(searchText === null || searchText === "") {
        queryInfo(1);
        return;
    }
    let path = `${proxy.serCtx}/userBase/searchUser`
    proxy.$axios.get(path, {
        params:{
            key: searchText
        }
    }).then((res) => {
        if(res.data.length === 0) {
            ElMessage("没有找到对应数据")
            return;
        }
        cookerInfos.data = res.data;
        totalPage = 1;
    })
}

function jumpCookerDetailPage(router, _id) {

    // 将当前点击的id传递给厨师具体界面
    router.push( {
      path: `/cookerDetail/${_id}`
    })
}

</script>

<style scoped>

#main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

#main-cookerShow {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 10px;
    justify-items: center; /* 子元素在网格格中居中对齐 */
    align-items: center;
}

#cooker-item {
    margin: 10px 0;
}
</style>